

<template>

  <div>
      

     <tab :line-width="2" bar-active-color="#900984" active-color='#900984'>
      <tab-item :class="{'vux-1px-r': index===0}"  selected @on-item-click="onItemClick">全部</tab-item>
      <tab-item :class="{'vux-1px-r': index===0}" @on-item-click="onItemClick">待支付</tab-item>
      <tab-item @on-item-click="onItemClick">已支付</tab-item>
    </tab>

    
    <div style="margin-top: 5px" v-for="(item,index) in list" v-if="( charge == 0 ) || ( charge == 1 && item.is_pay == 0) || ( charge == 2 && item.is_pay == 1 )"> 

       <div style="width: 100%; height: 0.01rem; background-color: #e4e4e5; border-top:1px #cfcfcf solid;"></div>
       <div class="flex-row" style="justify-content: space-between; margin: 0.6rem">
         <div>订单号：{{item.order_no}}</div>
         <div v-if="item.is_pay == 0" style="color:#900984;">代付款</div>
         <div v-if="item.is_pay == 1" style="color:#900984;">已完成</div>
       </div>
       <div style="width: 100%; height: 0.01rem; background-color: #e4e4e5; border-top:1px #cfcfcf solid;"></div>
      
       <div class="flex-row" style="margin: 0.6rem">
          <img :src="item.cover_pic" style="width: 8rem;height: 4.8rem">
          <div class="flex" style="flex-direction:column;margin-left: 0.6rem">
            <div style="height: 2.4rem; line-height: 2.4rem;font-size:1.2rem">{{item.name}}</div>
            <div class="flex-y-bottom" style="height: 2.4rem;">{{item.price}}元</div>
          </div>
       </div>
       <div style="width: 100%; height: 0.01rem; background-color: #e4e4e5; border-top:1px #cfcfcf solid;"></div>

       <div style="width: 98%;text-align: right; padding: 0.3rem 0;">
       	<span>实际支付：</span>
       	<span v-if="item.pay_price != 0">{{item.pay_price}}元</span>
       	<span v-if="item.pay_price != 0 && item.integral != 0">+</span>
       	<span v-if="item.integral != 0">{{item.integral}}学分</span>
       </div>

       <div style="width: 100%; height: 0.01rem; background-color: #e4e4e5; border-top:1px #cfcfcf solid;"></div>

       <div v-if="item.is_pay == 0" class="flex-row" style="justify-content:flex-end; width: 95%; margin: 0.6rem; margin-right: 1rem;" >

       
         <button @click="cancel(index)" class="btn" style="background-color: #888888">取消订单</button>
         
       </div>

       <div style="width: 100%; height: 0.6rem; background-color: #e4e4e5; border-top:1px #cfcfcf solid;"></div>

    </div>
   
    <div v-if="list.length == 0" style="margin: 1rem auto; width: 50%; text-align: center; color:#7b7a7a ">暂无更多内容！</div>  

  </div>

</template>

<script>

import {base64, Tab, TabItem } from 'vux'

    
export default {

  components: {
    Tab, TabItem,base64
  },
  data () {
    return {
     
     none:true,
     list:'',
     charge:0,
     access_token:''
    
    }
  },
  methods:{
     
     change:function(){


     },
     onItemClick:function(index){
       
       this.charge = index;
       console.log(this.charge);
     },
     
    //获取详情
    getDetail(){
    	
	    	this.$store.commit('updateLoadingStatus',true);
	    	
	    	this.$http.get(this.$store.state.api + 'orders/course&access_token=' + this.access_token)
		    .then((response) => {
		    		
		    console.log(response)
				
				if(response.body.code == 0) {
					
					this.list = response.body.data.list
					
				} else {
					
				}
					
				
				this.$store.commit('updateLoadingStatus',false);	
				
			}, (response) => {
	             
	            
	            
			});
    
    },
    
    //取消订单
    cancel(index){
    	
    	console.log(index)
    	console.log(this.list[index].id)
    	
    	this.$store.commit('updateLoadingStatus',true);
	    	
    	this.$http.get(this.$store.state.api + 'course-order/revoke&access_token=' + this.access_token + '&order_id' + this.list[index].id)
	    .then((response) => {
	    		
	    console.log(response)
			
			if(response.body.code == 0) {
				
				this.list = response.body.data.list
				
			} else {
				
			}
				
			
			this.$store.commit('updateLoadingStatus',false);	
			
		}, (response) => {
             
            
            
		});
    	
    },
    
    //获取地址栏信息
		getUrlStr(name){
	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },	
    
  },
  
  mounted() {
  	
  	var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              this.$root.getShare();
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
    	   this.access_token = localStorage.getItem('access_token');

    this.getDetail();

  },

  beforeMount () {

    this.index=this.$store.state.selectIndex;

  }
  

}



</script>


<style lang="less" scoped>

  .active{
    border-right-width: 0;
  }
  .vux-button-group > a.vux-button-tab-item-first:after{
    border-width:0;
    border-right-width: 1px;

  }
  .vux-button-group > a.vux-button-tab-item-middle:after{
    border-width:0;
    border-right-width: 1px;
  }
  .vux-button-group > a.vux-button-tab-item-last:after{
    border-width:0;
  
  }
  .btn{
   background-color: #888888;border: none; padding:0.3rem 0.8rem; font-size: 1rem; border-radius: 0.3rem;
}

 

</style>
